<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="HandheldFriendly" content="true"/>
    <meta name="MobileOptimized" content="320"/>
    <title>地图调度</title>
    <link rel="stylesheet" href="../../../css/mui.css" type="text/css" charset="utf-8"/>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <link href="../../../css/map/map.css" rel="stylesheet"/>
    <link href="../../../css/order/dispatcher/indes.css" rel="stylesheet"/>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=aU1pTSXXfaAc8TsdS1VFEM13T61o5pc4"></script>
    <script type="text/javascript" src="../../../js/mui.js"></script>
    <script type="text/javascript" src="../../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../../js/fastclick.js"></script>
    <script type="text/javascript" src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../js/map/dispatcher.js"></script>
    <script src="../../../js/vue-compents/dispatcher.js"></script>
    <script src="../../../js/vue-common.js"></script>
    <style>
        #app {
            background-color: #fff;
        }

        #app, body, html {
            height: 100%;
        }
    </style>
</head>

<body>
<div class="dispatcher-container" id="app">
    <!--地图-->
    <div class="map-container" id="myMap">地图加载中...</div>
    <!--搜索框-->
    <div class="map-search-box">
        <div @click="back" class="msb-left box-shadow msb-box-radius">
            <img src="../../../img/common/btn_back.png" alt="">
        </div>
        <div class="msb-right box-shadow msb-box-radius">
            <input onkeydown="if(event.keyCode==13){vm.searchOrder();}" v-model="device.atmCode" class="msb-input"
                   type="text" placeholder="请输入机具编号查找订单">
        </div>
    </div>
    <!--右侧工具栏-->
    <div class="ls-map-legend box-shadow msb-box-radius">
        <div @click="showLegend" class="legend-item">
            <img class="legend-img" src="../../../img/dispatcher/ic_coverage@3x.png" alt="">
            <div>图层</div>
        </div>
        <div @click="tranfic" class="legend-item">
            <img class="legend-img" src="../../../img/dispatcher/ic_roadcondition@3x.png" alt="">
            <div>路况</div>
        </div>
    </div>

    <!--底部工具栏-->
    <div class="ls-map-bottom-btn-group box-shadow">
        <div @click="goTaskList" class="map-bottom-btn-group-item"><img src="../../../img/dispatcher/ic_task@3x.png"
                                                                        alt="">任务
        </div>
        <div @click="goPersonList" class="map-bottom-btn-group-item"><img
                src="../../../img/dispatcher/ic_personnel@3x.png" alt="">人员
        </div>
    </div>
    <!--用户信息弹框-->
    <div v-show="infoModal" @click="changeMode">
        <div class="lm-modal lm-box">
            <div class="lm-box-left">
                <div class="lm-img-box" :style="{backgroundImage: 'url(' + showUserImg(userInfo.icon) + ')'}"></div>
            </div>
            <div class="lm-box-right">
                <div><span class="lm-box-title">{{userInfo.name}}</span>（{{userInfo.phone}}）
                    <lm-status-span :type="userInfo.status"></lm-status-span>
                </div>
                <div style="line-height: 2rem">
                    <div v-if="userInfo.status > 0 ">{{showUserInfoStatus(userInfo)}}</div>
                    <div>所在单位：{{userInfo.orgName}}</div>
                </div>
            </div>
            <div class="dm-eng-call">
                <img @click="callPhone(userInfo.phone)" src="../../../img/common/btn_phone@3x.png" alt="">
            </div>
        </div>
    </div>
    <!--机具信息弹框-->
    <div v-show="device.modal" @click="changeMode">
        <div class="lm-modal lm-device-box">
            <div class="dm-title-box">
                <div class="dtb-left">机具信息</div>
                <div class="dtb-right" @click="goOrderHistory(device.info.atmId)">查看维修历史记录></div>
            </div>

            <div class="dm-content-box">
                <div>
                    <span>{{device.info.atmModelCode}}-</span>
                    <span>{{device.info.atmInsSide}} <lm-order-status-span
                            :type="switchOrderStatus(device.info.status)">{{device.info.status | orderStatusFilter }}</lm-order-status-span></span>
                </div>
                <div>
                    <span class="dm-lg">故障模块：</span>
                    <span>{{device.info.startUnTypeName}}</span>
                </div>
                <div>
                    <span class="dm-lg">故障描述：</span>
                    <span>{{device.info.startUnDesc}}</span>
                </div>
            </div>

            <div class="dm-eng-info" v-for="item of device.info.engine">
                <div class="dm-eng-box-left">
                    <div class="dm-eng-img-box"
                         :style="{backgroundImage: 'url(' + showUserImg(item.icon) + ')'}"></div>
                </div>
                <div class="dm-eng-right">
                    <div><span class="dm-eng-box-title">{{item.engName}}</span>（{{item.engPhone}})</div>
                    <div>所在单位：{{item.deptName}}</div>
                </div>
                <div class="dm-eng-call">
                    <img @click="callPhone(item.engPhone)" src="../../../img/common/btn_phone@3x.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!--图层弹框-->
    <dmap-right-legend v-model="legendModal"></dmap-right-legend>
</div>
</body>

<script>
    /**
     * 页面点击事件
     * @type {number}
     */
    var startTime = 0;
    var moveFlag = false;
    var showFalg = false;
    document.body.addEventListener("touchstart", function (event) {
        startTime = Date.now();
        showFalg = vm.infoLayer;
    }, true);
    document.body.addEventListener("touchmove", function (event) {
        moveFlag = true;
    }, true);
    document.body.addEventListener("touchend", function (event) {
        var time = Date.now() - startTime;
        setTimeout(function () {
            if (time < 300 && !moveFlag && showFalg === vm.infoLayer && !vm.clickPositionBlank) {
                // 关闭用户信息层
                vm.closeUserInfo();
            }
        }, 10)
        moveFlag = false;
        vm.clickPositionBlank = false
    }, true);
</script>
<script>
    // 百度地图API功能
    setTimeout(function () {
        vm.baiduMap = map = new BMap.Map("myMap");
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 10);
        // map.showZoomControls(true);
    }, 100)
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                // 上次点击用户信息
                position: {
                    selectedItemColor: '',
                    div1: '',
                    div2: ''
                },
                //地图
                baiduMap: '',
                traffic: '',
                // 用户信息modal
                infoModal: false,
                // 缓存点击
                infoLayer: false,
                clickPositionBlank: false,

                legendModal: false,
                mapData: {
                    user: [],
                    device: {}
                },
                userInfo: {
                    name: '',
                    orgName: '',
                    status: '',
                    phone: ''
                },
                // 设备信息
                device: {
                    modal: false,
                    info: {
                        atmModelCode: '',// 机具型号
                        atmInsSide: '', // 网点名称
                        status: '0', // 状态
                        startUnTypeName: '', // 故障模块
                        startUnDesc: '', // 故障描述
                        engine: [],
                        atmId: '' // 机具ID
                    },
                    atmCode: '' // 搜索机具编号
                }
            }
        },
        methods: {
            // 弹框计数
            changeMode: function () {
                this.clickPositionBlank = true;
                console.log('--changMode-')
            },
            // 任务列表
            goTaskList: function () {
                redirect('pages/order/dispatcher/taskList.html');
            },
            // 人员列表
            goPersonList: function () {
                redirect('pages/order/dispatcher/personList.html');
            },
            // 订单历史
            goOrderHistory: function (atmId) {
                redirect('pages/order/dispatcher/orderHistory.html?atmId=' + atmId);
            },
            callPhone: function (phone) {
                goCallPhone(phone);
            },
            back: function () {
                mui.back();
            },
            // 关闭用户信息
            closeUserInfo: function () {
                this.infoModal = false;
                this.device.modal = false;
                if (vm.position.div1) {
                    resetBgColor(vm.position.div1, vm.position.div2, vm.position.selectedItemColor);
                }

            },
            // 交通流量
            tranfic: function () {
                var map = this.baiduMap;
                var traffic = this.traffic;
                if (traffic) {
                    map.removeTileLayer(traffic);
                    this.traffic = null;
                } else {
                    this.traffic = traffic = new BMap.TrafficLayer();
                    map.addTileLayer(traffic);
                }
            },
            // 显示图例
            showLegend: function () {
                this.legendModal = true;
            },
            // 初始化用户信息
            initMapData: function () {
                Resource.get(DISPATCHER_POINT_LIST, {pageNo: 1, pageSize: 1000}, function (res) {
                    // 维护商分组数据
                    var pointsView = [];
                    var engDataList = res.engData;
                    var orderDataList = res.orderData;
                    // 工程师信息
                    for (var i = 0; i < engDataList.length; i++) {
                        var itemPerson = engDataList[i];
                        pointsView.push(new BMap.Point(itemPerson.xCode, itemPerson.yCode));
                        var myCompOverlay = buildPerson(itemPerson.xCode, itemPerson.yCode, itemPerson.name, itemPerson.workStatus, itemPerson, function (data, divT1, divT2) {
                            if (vm.position.div1) {
                                resetBgColor(vm.position.div1, vm.position.div2, vm.position.selectedItemColor);
                            }
                            var point = new BMap.Point(data.xCode, data.yCode);
                            saveUserInfo(divT1, divT2, point, data);
                        })
                        map.addOverlay(myCompOverlay);
                    }
                    // 机具信息
                    for (var j = 0; j < orderDataList.length; j++) {
                        var item = orderDataList[j];
                        pointsView.push(new BMap.Point(item.xCode, item.yCode));
                        var overlay = buildDevice(item.xCode, item.yCode, item.atmCode, switchOrderStatus(item.orderStatus), item, function (data, divT1, divT2) {
                            if (vm.position.div1) {
                                resetBgColor(vm.position.div1, vm.position.div2, vm.position.selectedItemColor);
                            }
                            var point = new BMap.Point(data.xCode, data.yCode);
                            showDeviceInfo(divT1, divT2, point, data);
                        })
                        // 将所有机具的引用存储 key 订单ID
                        var orderId = item.id;
                        saveIntoDeviceInfo(orderId, overlay);
                        map.addOverlay(overlay);
                    }
                    vm.mapData.user = pointsView;
                    vm.baiduMap.setViewport(pointsView); //将所有的点放置在最佳视野内
                })
            },
            // 搜索订单
            searchOrder: function () {
                var atmCode = this.device.atmCode;
                if (!atmCode) {
                    return mui.toast('请输入机具编号！');
                }
                console.log('----搜索  --')
                Resource.get(DISPATCHER_POINT_LIST, {pageNo: 1, pageSize: 1000, atmCode: atmCode}, function (res) {
                    // 没搜到直接返回
                    if (res.orderData.length === 0) {
                        mui.toast('订单不存在！')
                        return
                    }
                    var orderId = res.orderData[0].id;
                    // 地图组件
                    var overlayComponent = vm.mapData.device[orderId];
                    overlayComponent._div.ontouchstart();
                    document.activeElement.blur();
                })
            }
        }
    });

    mui.plusReady(function () {
        setTimeout(function () {
            vm.initMapData();
        }, 200)
    })

    // 保存点击用户信息
    function saveUserInfo(divT1, divT2, point, data) {
        vm.position.selectedItemColor = changeBackGroundColor(divT1, divT2);
        vm.position.div1 = divT1;
        vm.position.div2 = divT2;
        // 展示机具关闭用户信息
        vm.infoModal = true;
        vm.device.modal = false;
        // 开关
        vm.infoLayer = !vm.infoLayer;
        vm.baiduMap.centerAndZoom(point, 25);
        vm.userInfo = {
            name: data.name,
            orgName: data.orgName,
            status: data.workStatus,
            phone: data.phone,
            icon: data.icon,
            repairAtmInsSide: data.repairAtmInsSide,
            repairAtmCode:data.repairAtmCode
        }
    }

    // 保存机具信息
    function showDeviceInfo(divT1, divT2, point, data) {
        vm.position.selectedItemColor = changeBackGroundColor(divT1, divT2);
        vm.position.div1 = divT1;
        vm.position.div2 = divT2;
        // 展示机具关闭用户信息
        vm.device.modal = true;
        vm.infoModal = false;
        // 开关
        vm.infoLayer = !vm.infoLayer;
        vm.baiduMap.centerAndZoom(point, 25);
        vm.device.info = {
            atmModelCode: data.atmModelCode,// 机具型号
            atmInsSide: data.atmInsSide, // 网点名称
            status: data.orderStatus, // 状态
            startUnTypeName: data.startUnTypeName, // 故障模块
            startUnDesc: data.startUnDesc, // 故障描述
            engine: data.engs,
            atmId: data.atmId
        }
    }


    // 存储所有机具点
    function saveIntoDeviceInfo(orderId, overlayComponents) {
        vm.mapData.device[orderId] = overlayComponents;
    }

    // 用户展示状态 途中。。。维修中
    function showUserInfoStatus(userInfo) {
        var status = userInfo.status;
        var content = userInfo.repairAtmInsSide;
        var repairAtmCode = userInfo.repairAtmCode;
        switch (status) {
            case "2":
                return "正在赶往："+content;
            case "1":
                return "正在维修："+repairAtmCode;

        }
    }
</script>

</html>